{% load i18n %}
{% load materializecss %}
{% load prices_i18n %}

<form class="form-async" role="form" method="post" action="{% url 'dashboard:orderline-cancel' order_pk=order.pk line_pk=item.pk %}" novalidate>
  {% csrf_token %}
  <div class="modal-content">
    <h5>
      {% trans "Remove order line?" context "Modal remove order line title" %}
    </h5>
    <p>
      {% blocktrans trimmed with order=order context "Modal remove order line text" %}
        Are you sure you want remove this order line?
      {% endblocktrans %}
    </p>
    {{ form|materializecss }}
    <table>
      <thead>
        <tr>
          <th class="wide">
            {% trans "Item" context "Modal remove order line table header" %}
          </th>
          <th>
            {% trans "SKU" context "Modal remove order line table header" %}
          </th>
          <th class="right-align">
            {% trans "Price" context "Modal remove order line table header" %}
          </th>
          <th class="right-align">
            {% trans "Quantity" context "Modal remove order line table header" %}
          </th>
          <th class="right-align">
            {% trans "Total" context "Modal remove order line table header" %}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            {{ item.product_name }}<br>
          </td>
          <td>
            {{ item.product_sku }}
          </td>
          <td class="right-align">
            {% gross item.get_price_per_item html=True %}
          </td>
          <td class="right-align">
            {{ item.quantity }}
          </td>
          <td class="right-align">
            {% gross item.get_total html=True %}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="modal-footer">
    <button type="submit" class="modal-action btn-flat">
      {% trans "Remove" context "Dashboard remove action" %}
    </button>
    <a href="#!" aria-hidden="true" class="modal-action modal-close btn-flat">
      {% trans "Cancel" context "Dashboard cancel action" %}
    </a>
  </div>
</form>
